<template>
  <div class="s-result">
    <n-input-group style="padding: 0 18vw; margin-top: 8vh">
      <n-select size="large" style="width: 10%"></n-select>
      <n-input
        style="width: 42%"
        size="large"
        autofocus
        @keyup.enter="normalSearch"
      >
        <template #suffix>
          <n-icon>
            <search />
          </n-icon>
        </template>
      </n-input>
      <n-button
        size="large"
        style="width: 6%; font-size: 0.85rem"
        @click="resultSearch"
      >
        结果中搜索
      </n-button>
      <n-button
        size="large"
        style="width: 5%; font-size: 0.85rem"
        @click="proSearch"
      >
        高级搜索
      </n-button>
    </n-input-group>
    <div style="height: 3vh"></div>
    <n-layout has-sider>
      <n-layout-sider
        collapse-mode="width"
        :collapsed-width="30"
        width="25vw"
        show-trigger="arrow-circle"
        content-style="padding: 24px;"
        :show-collapsed-content="false"
        bordered
        class="s-result-layout"
      >
        <n-card>筛选框</n-card>
      </n-layout-sider>
      <n-layout-content
        content-style="padding: 4vh 5vw;margin-right:2vw"
        class="s-result-layout"
      >
        <n-list style="padding: 1vh 1vw; background-color: #fff">
          <template #header>
            <n-space justify="space-between" style="height: 8vh">
              <div>全选 已选</div>
              <div>排序相关，具体可以参考知网</div>
            </n-space>
          </template>
          <n-list-item style="cursor: pointer" @click="$router.push('/detail')">
            <n-thing
              title-extra="extra"
              description="description"
              v-for="item in resultList"
              :key="item.id"
              style="margin-bottom: 20px"
            >
              <template #header>
                <span class="head-title">{{ item.title }}</span>
              </template>
              {{ item.title }}
            </n-thing>
          </n-list-item>
        </n-list>
      </n-layout-content>
    </n-layout>
  </div>
</template>

<script setup lang="ts">
import { Search } from '@vicons/ionicons5';
const normalSearch = () => {};
const resultSearch = () => {};
const proSearch = () => {};
const resultList = [
  {
    id: 1,
    title: 'title1',
    //还有很多，，
  },
  {
    id: 2,
    title: 'title2',
    //还有很多，，
  },
];
</script>

<style scoped lang="scss">
$bgc: #f1f1f1;
.s-result {
  min-height: 88vh;
  background-color: $bgc;
  &-layout {
    background-color: $bgc;
  }
}
.head-title {
  font-weight: 700;
}
</style>
